<template>
  <div class="admin">
    <el-container :style="{height:screenHeight+'px'}">
      <el-header style="line-height:2;">
        <span style="line-height:2.5;font-size:20px">大学生活动管理系统
          <el-avatar  :src="url" style="position:relative;top:15%;left:36%;"></el-avatar>
          <el-dropdown style="position:relative;left:36.5%;">
            <span style="border:1px #eee solid;padding:5px 5px">
              用户<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu  slot="dropdown">
              <el-dropdown-item @click.native="Exit()">注销</el-dropdown-item>
              <el-dropdown-item @click.native="Refresh">刷新</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </span> 
      </el-header>
      <el-container :style="{height:screenHeight}+'px'">
        <el-aside width="30" style="background:#F2F6FC">
          <div class="aside" style="position:relavite;top:0px;">
            <el-menu active-text-color="#f78f3b" background-color='#F2F6FC' :default-active="$router.path" router  class="el-menu-vertical-demo"  style="border: none;">
              <el-menu-item index="/ActiveShow">
                <i class="el-icon-coin"></i>
                <span slot="title">活动展示</span>
              </el-menu-item>
              <el-menu-item index="/MyActive">
                <i class="el-icon-magic-stick"></i>
                <span slot="title">我的活动</span>
              </el-menu-item>
              <el-menu-item index="/MyScore">
                <i class="el-icon-postcard"></i>
                <span slot="title">我的分数</span>
              </el-menu-item>
              <el-menu-item index="/UserCenter">
                <i class="el-icon-user"></i>
                <span slot="title">个人中心</span>
              </el-menu-item>
            </el-menu>
          </div>
          </el-aside>
        <el-container :style="{height:(screenHeight-120)}+'px'" style="overflow:auto;">
          <el-main>
              <div style="border-radius:4px;">
                <router-view></router-view>
              </div>
          </el-main>
        </el-container>
      </el-container>
      <el-footer style="line-height:2;">
      </el-footer>
    </el-container>
  </div>
</template>

<script>
export default {
    name:'ActiveHome',
    data(){
        return{
            isCollapse: true,
            url:'',
            screenWindth:window.innerWidth,
            screenHeight:window.innerHeight,
        }
    },
    mounted(){    
      window.addEventListener('resize',this.handResize);     
    },
    methods:{
      handResize(){  
        this.screenWindth=window.innerWidth;
        this.screenHeight=window.innerHeight;  
      },
       //退出
    Exit(){
      localStorage.clear()
      this.$router.push('/ActiveLogin')
      
    }
    },
    beforeDestroy(){
      window.removeEventListener('resize',this.handResize);
    },
}
</script>

<style>
 .admin
  {
    width:100%;
    height:100vh;
    position:absolute;
    left:0px;
    top: 0px;
  }
  .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
  }
  .el-header, .el-footer {
    background-color: #219df0;
    color: #333;
    text-align: center;
  }
  
  .el-aside {
    background-color: #D3DCE6;
    color: #333;
    text-align: center;
  }
  
  .el-main {
    background-color: #fafafd;
    color: #333;
  }
  
  body > .el-container {
    margin-bottom: 40px;
    height:100vh;
  }
  
  .el-container:nth-child(5) .el-aside,
  .el-container:nth-child(6) .el-aside {
    line-height: 260px;
  }
  
  .el-container:nth-child(7) .el-aside {
    line-height: 320px;
  }
.el-card__body, .el-main {
    padding: 6px;
    padding-top: 6px;
    padding-right: 4px;
    padding-bottom: 6px;
    padding-left: 6px;
    border-radius: 4px;
    border:2px
}

</style>